<!--
 * @FileDescription 填空
 * @Author lz
 * @Date 20230131 17:08:39
 * @LastEditors lz
 * @LastEditTime 20230131 17:08:39
-->
<template>
    <div class="blankBox">
        <div class="ask_box ask">
            <div class="tit">
                主考官
            </div>
            <div class="content">
            请将该部件的参数信息补充完整。
        </div>
        </div>
        <fillInBox v-for=" (item, index) in MenuIndexData.Default.LabelDataList.value" :Name="item.Name" :Keys="item.InstanceId" :Length="item.Length"
            :ViewportPointX="item.ViewportPointX + '%'" :ViewportPointY="item.ViewportPointY + '%'"
            :Direction="item.Direction" :key="item.InstanceId" :indexs="index" ref="fillIn" @verify="hand"></fillInBox>
        <!-- <fillInBox v-for=" (item, index) in MenuIndexData.Default.LabelDataList.value" :key="item.InstanceId" :index="index"
                                            :information="item" @verify="hand">
                                        </fillInBox> -->
        <div class="submit Btn" @click="submit()">
            提交
        </div>
        <!-- v-if="simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit == false && HomeContent.Default.ApplicationType.value == '训练'" -->
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits,unref } from 'vue'
import { any, array } from 'vue-types';
import HomeContent from '../../HomeContent';
import MenuIndexData from '../../menu/MenuIndex';
import simulationData, { EchoData } from '../simulationTraining';
import fillInBox from './blanksBox.vue'
import Speak from '@components/TTS/Speak.vue';
const state = reactive({
    Echo: [],
})

const emit = defineEmits(["doSth"]);
// 触发提交
function submit() {
    simulationData.Default.TriggerValue.value = !simulationData.Default.TriggerValue.value

    setTimeout(() => {
        conArr()
    }, 250);

    setTimeout(() => {
        let newValuesList: any[] = [...newArr.value.values()]
        console.log(newValuesList);
        for (var i = 0; i < newValuesList.length; i++) {
            if (newValuesList[i] == false) {
                emit('doSth', false);
                break;
            }
            if (newValuesList[i] == true && i + 1 == MenuIndexData.Default.LabelDataList.value.length) {
                emit('doSth', true);
            }
        }
    }, 500);


}
// 存贮题目信息
let conArrlist: Array<any> = []
function conArr() {
    conArrlist = []
    MenuIndexData.Default.LabelDataList.value.forEach((item, index) => {
        conArrlist.push({ id: index, Name: contentList.value.get(index) })
    });
    simulationData.Default.historyList.set(simulationData.Default.subscript.value, conArrlist)
    console.log('存贮', simulationData.Default.historyList.get(simulationData.Default.subscript.value));
}

let newArr = ref(new Map())
let contentList = ref(new Map())
function hand(val: boolean, index: number, content: any) {
    newArr.value.set(index, val)
    contentList.value.set(index, content)
    console.log(val, index, content, '数据推送', newArr);
};

onMounted(() => {
    console.log(HomeContent.Default.pausableType.value.pausable);
})
</script>

<style scoped>
.submit {
    left: 888px;
    bottom: 90px;
}

.ask_box {
    position: absolute;
    right: 0;
    width: 300px;
    height: 180px;
    background-image: url('/structure/prompt_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ask {
    top: 100px;
}

.tit {
    color: #31F8FF;
    font-size: 28px;
    padding: 10px;
    padding-left: 20px;
    padding-bottom: 0;
    font-family: PangMenZhengDao;
}

.content {
    font-size: 16px;
    padding: 20px;
    padding-top: 0;
    height: 110px;
    overflow-y: auto;
    color: #fff;
}

.content::-webkit-scrollbar {
    display: none;
}

.Btn {
    position: absolute;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Btn:hover {
    color: #fff;
    background-image: url('/structure/btn_bg_select.png');
}
</style>